<template>
  <div class="content">
    <van-nav-bar
     title="直放站"
     left-text="返回"
     class="header-top" 
     left-arrow
     @click-left="onClickLeft"
   />
    <van-tabs class="monitor-page" v-model="active" @change="changeActive">
    <van-tab title="站点监控" name="station">
      <van-search v-model="value"
       @search="onSearch"
       @cancel="onCancel" 
       placeholder="请输入搜索关键词" />
       <van-pull-refresh v-model="refreshing" @refresh="onRefresh(active)">
        <van-list v-if="stationDataList.length > 0" class="content-list"  v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad(active)">
          <van-cell-group v-for="(item, index) in stationDataList" :key="index">
            <van-cell icon="shop-o" :title="item.stationName" is-link :to="{path:'/siteDetail',name:'siteDetail',query:{ id: item.stationId, title: item.stationName }}" />
            <div class="item">
              <span>近端单元数量: {{item.accessUnitQuantity}}</span>
              <span>拓展单元数量: {{item.extendUnitQuantity}}</span>
              <span>远端单元数量: {{item.remoteUnitQuantity}}</span>
            </div>
            <div class="item">
              <span>地址: {{item.address}}</span>
            </div>
          </van-cell-group>
        </van-list>
        <van-list class="content-list nodata" v-else>
          {{ firstLoad?'加载中...':refreshing?'':'暂无数据' }}
            
        </van-list>
       
      </van-pull-refresh>
    </van-tab>
    <van-tab title="设备安装" name="stationInstalled">
        <van-search v-model="value"
       @search="onSearch"
       @cancel="onCancel" 
       placeholder="请输入搜索关键词" />
       <van-pull-refresh v-model="refreshing" @refresh="onRefresh(active)">
        <van-list class=" content-list" v-if="InstalledDataList.length > 0"  v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad(active)">
          <van-cell-group v-for="(item, index) in InstalledDataList" :key="index">
            <van-cell icon="shop-o" :title="item.stationName" is-link :to="{ path: '/InstalledDetail', name: 'InstalledDetail',query: {id: item.id, title: item.stationName}}" />
            <div class="item">
              <span>地址: {{item.mc}}</span>
              <span>区市: {{item.sl}}</span>
            </div>
            <div class="item">
              <span>详细地址: {{item.address}}</span>
            </div>
          </van-cell-group>
        </van-list>
        <van-list class="content-list nodata" v-else>
          {{ firstLoad?'加载中...':refreshing?'':'暂无数据' }}
            
        </van-list>
      </van-pull-refresh>
    </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import testApi from "@/api/test";
import { simpleDebounce } from "@/utils/util";
let that = this;
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'site',
  data() {
    return {
      List:[],
      active: 2,
      value: '',
      finished:true,
      stationParams:{
        province: '', // 省
        city: '', // 市
        district: '', // 区
        // stationCode: '', // 站址编码
        // stationName: '', // 站点名称
        // longitude: '', //经度
        // latitude: '', // 纬度
        // address: '', // 地址
        // businessType: '', //业务场景
        // buildingQuantity: '', // 楼宇数量
        // elevatorQuantity: '', // 电梯数量
        // maintenanceCompany: '', // 维保企业
        // maintenanceManager: '', // 维保负责人
        // maintenancePhone: '', // 维保电话
      },
      stationDataList: [], // 
      pageNo: 1,
      pageSize: 10,
      InstalledParams:{
        pageNo: 1,
        pageSize: 10,
      },
      InstalledDataList: [],
      loading:false,
      refreshing:false,
      firstLoad:true,
    };
  },
  created(){
    this.refreshing = true;
    this.pageNo=0;
    this.onLoad(1);
  },
  methods: {
    Debounce(fn, delay = 500) {
      let timer = null
      return function () {
        let args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, args)
        }, delay)
      }
    },
    onRefresh(type){
      this.firstLoad=false
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.pageNo = 0;
      this.onLoad(type, 'ref');
    },
    onLoad:simpleDebounce(function() {
      this.pageNo++; // 加载下一页数据
      this.loadData(); // 加载数据
    }, 2000),
    async loadData() {
      if(this.active=='station'){
        this.getStationData();
      }else{
        this.getInstallData();
      }
       
    },
    getStationData(){
      
      this.loading = true;
      this.finished = false;
      // 获取站点监控
      testApi
        .getStationAPI({ 
          pageNo:this.pageNo,
          pageSize:this.pageSize
        })
        .then((res) => {
          // console.log(res.data.message)
          if(res.data.code === 0 && res.data.message === "请求成功"){
            // this.stationDataList = res.data.data.records

            const newData = res.data.data.records; // 假设服务器返回的数据是一个数组
            this.stationDataList = this.stationDataList.concat(newData); // 将新数据追加到列表中
            this.loading = false; // 加载完成
            if (newData.length < this.pageSize) {
              this.finished = true; // 已加载完所有数据
              this.pageNo --;
            }
            this.firstLoad=false;
            
            this.refreshing = false;
          } else{
            this.stationDataList = [];
            this.finished = true;
            this.loading = false;
            this.refreshing = false;
            this.firstLoad=false;
          }
        })
        .catch((err) =>{
          console.log('服务器无响应', err)
          this.stationDataList = [];
            this.finished = true;
            this.loading = false;
            this.refreshing = false;
            this.firstLoad=false;
        } )
        .finally(()=>{});
    },
    getInstallData(){
      
      this.loading = true;
      this.finished = false;
      // 获取设备安装
      testApi
        .getStationInstalledAPI({
          pageNo:this.InstalledParams.pageNo,
          pageSize:this.InstalledParams.pageSize
        })
        .then((res) => {
          if(res.data.code === 0 && res.data.message === "请求成功"){
            // this.InstalledDataList = res.data.data.records
            const newData = res.data.data.records; // 假设服务器返回的数据是一个数组
            this.InstalledDataList = this.stationDataList.concat(newData); // 将新数据追加到列表中
            this.loading = false; // 加载完成
            if (newData.length < this.pageSize) {
              this.finished = true; // 已加载完所有数据
              this.pageNo --;
            }
            this.firstLoad=false;
            
            this.refreshing = false;
          } else{
            this.InstalledDataList = []
            
            this.finished = true;
            this.loading = false;
            this.refreshing = false;
            this.firstLoad=false;
          }
        })
        .catch((err) => {
          this.stationDataList = [];
          this.finished = true;
          this.loading = false;
          this.refreshing = false;
            this.firstLoad=false;
        })
        .finally(()=>{});
    },
    changeActive(event){
      this.firstLoad=true;
      this.pageNo = 1;
      if(event === 'station'){
        this.getStationData()
      }else if(event === 'stationInstalled'){
        this.getInstallData()
      }
      
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onSearch() {
    },
    onCancel() {
    },
  },
};
</script>

<style scoped>
::v-deep .van-nav-bar__content {
 background-color: #eb4b4b;
}
::v-deep .van-nav-bar__title{
  color: #fff;
}
::v-deep .van-nav-bar .van-icon{
  color: #fff;
}
::v-deep .van-nav-bar__text{
color: #fff;
}
::v-deep .van-tab--active{
  color: #eb4b4b;
}
::v-deep .van-cell-group {
    margin: 13px 0;
}
::v-deep .van-cell__title{
 font-size: 18px;
 color: #000;
}
.item{
  font-size: 14px;
  display: flex;
  padding: 0 7%;
  line-height: 30px;
  justify-content: space-between;
}
.content{
    background-color: #cccccc4a;
}
::v-deep .van-loading.van-loading--circular{
    background-color: #ededed4a !important;
    line-height: 50px!important;
  }
</style>